<template>
    <div>
        <el-card  style="margin: 20px;height: 60px;text-align: left">
            <span>距离考试结束还剩:</span>
            <span style="color: red">{{hour? hourString+'时'+minuteString+'分钟'+secondString : minuteString+'分钟'+secondString+'秒'}}</span>
            <el-button type="primary" style="float: right" size="mini" @click="submitPaper" v-loading.fullscreen.lock="fullscreenLoading">提交试卷</el-button>
        </el-card>

        <el-card  class="sideBar">
            <div style="float: left;width: 100%">
                <div class="card-title flex">答题卡</div>
                <div class="card-tip-incomplete">未答题</div>
                <div class="card-tip-incomplete" style="background: #42b983">已完成</div>
            </div>
            <div style="float: left;width: 100%">
                <div class="card-title" v-if="SingleChoice.length!=0">单选题</div>
                <div v-for="(item,index) in SingleChoice ">
                    <div :class="singleColor(index)"
                         @click="toIndex(index,'SingleChoice')" >{{index+1}}</div>
                </div>
            </div>
            <div style="float: left;width: 100%;">
                <div class="card-title" v-if="multipleChoice.length!=0">多选题</div>
                <div v-for="(item,index) in multipleChoice ">
                    <div :class="multipleColor(index)"
                         @click="toIndex(index,'multipleChoice')">{{index+1+SingleChoice.length}}</div>
                </div>
            </div>
            <div style="float: left;width: 100%;">
                <div class="card-title" v-if="judgmentChoice.length!=0">判断题</div>
                <div v-for="(item,index) in judgmentChoice ">
                    <div :class="judgmentColor(index)"
                         @click="toIndex(index,'judgmentChoice')">{{countLength-judgmentChoice.length+index+2}}</div>
                </div>
            </div>
        </el-card>
        <el-card class="main" >
            <div v-if="i<SingleChoice.length?true:false" v-for="(item,index) in SingleChoice">
                <div style="text-align: left;margin-bottom: 8px" v-if="index==i">{{item.questionTitle}}</div>
                <div style="text-align: left;margin-left: 10px" v-if="index==i">{{item.questionContent}}</div>
                    <div v-for="(select,index1) in item.questionSelect" v-if="index==i">
                        <el-radio class="options"  style="margin:15px" v-model="choose[i]" :label="index1" border>
                            {{select.selectAbc+' '+select.selectContent}}
                        </el-radio>
                    </div>
            </div>
            <div v-if="i>=SingleChoice.length?true:false" v-for="(item,index) in multipleChoice">
                <div style="text-align: left;margin-bottom: 8px" v-if="index+SingleChoice.length==i">{{item.questionTitle}}</div>
                <div style="text-align: left;margin-left: 10px" v-if="index+SingleChoice.length==i">{{item.questionContent}}</div>
                    <el-checkbox-group v-for="(select,index1) in item.questionSelect" v-if="index+SingleChoice.length==i" v-model="checkList[i-SingleChoice.length]">
                        <el-checkbox  class="options" style="margin:15px" border :label="index1">
                            {{select.selectAbc+' '+select.selectContent}}
                        </el-checkbox>
                    </el-checkbox-group>
            </div>
            <div v-if="i>=SingleChoice.length+multipleChoice.length?true:false" v-for="(item,index) in judgmentChoice">
                <div style="text-align: left;margin-bottom: 8px" v-if="index+SingleChoice.length+multipleChoice.length==i">{{item.questionTitle}}</div>
                <div style="text-align: left;margin-left: 10px;margin-bottom: 50px" v-if="index+SingleChoice.length+multipleChoice.length==i">{{item.questionContent}}</div>
                <div v-for="(select,index1) in item.questionSelect" v-if="index+SingleChoice.length+multipleChoice.length==i">
                    <el-radio class="options"  style="margin:15px" v-model="judgmentList[i-SingleChoice.length-multipleChoice.length]" :label="index1" border>
                        {{select.selectAbc}}
                    </el-radio>
                </div>
            </div>
        </el-card>
        <el-button type="warning" style="margin-left: 25%;float: left" :disabled="i==0?true:false" @click="toPro">上一题</el-button>
        <el-button type="warning" style="float: left" :disabled="i<countLength?false:true" @click="toNext">下一题</el-button>
    </div>

</template>
<script>
    import {GetOnlineExam} from "../../request/api";

    export default {
        created() {
            this.getExam();

        },
        data () {
            return {
                fullscreenLoading: false,//页面加载
                countLength:"",//总长度计算
                clickColor:'',//点击标记
                i:0,//选择题标记
                hour: '',
                in:50,
                minute: '',
                second: '',
                promiseTimer: '',
                choose:[],//单选题答案
                checkList:[],//多选题答案
                judgmentList:[],//判断题答案
                remainTime:60*this.$store.state.examInfo.duration,
                SingleChoice:[],
                multipleChoice:[],
                judgmentChoice:[]
            }
        },
        // props: {
        //     remainTime: {    // 倒计时间总秒数
        //         default: 60*60
        //     }
        // },
        mounted () {
            if (this.remainTime > 0) {
                this.hour = Math.floor((this.remainTime / 3600) % 24);
                this.minute = Math.floor((this.remainTime / 60) % 60);
                this.second = Math.floor(this.remainTime % 60);
                this.countDowm()
            }
        },
        methods: {
            getExam(){
                GetOnlineExam({examId:this.$store.state.examInfo.paperId}).then(resp=>{
                    console.log(resp)
                    let {examPaper}=resp.data.data
                    this.SingleChoice=examPaper.choices.singleChoice;
                    this.multipleChoice=examPaper.choices.multipleChoice;
                    this.judgmentChoice=examPaper.choices.judgmentChoice;
                    this.creatLength();
                    console.log(this.SingleChoice)
                })
            },
            //页面加载
            openFullScreen1() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                }, 2000);
            },
            //提交试卷
            submitPaper(){
                console.log("单选题"+this.choose);
                console.log("多选题"+this.checkList);
                console.log("判断题"+this.judgmentList);
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                    this.$router.push("/studentHome/endExam")
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                }, 2000);

            },
            //下一题
            toNext(){
                if (this.i<this.countLength){
                    this.i=this.i+1;
                    this.clickColor=this.i;
                }

            },
            //上一题
            toPro(){
                if (this.i>0){
                    this.i=this.i-1;
                    this.clickColor=this.i;
                }
            },
            //跳到index题
            toIndex(index,flag){
                if(flag=='SingleChoice'){
                    this.i=index;
                    this.clickColor=index;
                }if(flag=='multipleChoice'){
                    this.i=index+this.SingleChoice.length;
                    this.clickColor=index+this.SingleChoice.length;
                }if(flag=="judgmentChoice"){
                    this.i=index+this.SingleChoice.length+this.multipleChoice.length;
                    this.clickColor=index+this.SingleChoice.length+this.multipleChoice.length;;
                }

            },
            //初始化
            creatLength(){
                this.countLength=this.SingleChoice.length+this.multipleChoice.length+this.judgmentChoice.length-1;
                console.log("candu"+this.countLength)

                console.log(this.countLength)
                for (let i=0;i<this.multipleChoice.length;i++){
                    this.checkList.push([])
                }
                for (let i=0;i<this.judgmentChoice.length;i++){
                    this.judgmentList.push([])
                }
            },

            countDowm () {
                let that = this;
                clearInterval(this.promiseTimer);
                this.promiseTimer = setInterval(function () {
                    if (that.hour === 0) {
                        if (that.minute !== 0 && that.second === 0) {
                            that.second = 59;
                            that.minute -= 1
                        } else if (that.minute === 0 && that.second === 0) {
                            that.second = 0;
                            that.$emit('countDowmEnd', true);
                            clearInterval(that.promiseTimer)
                        } else {
                            that.second -= 1
                        }
                    } else {
                        if (that.minute !== 0 && that.second === 0) {
                            that.second = 59;
                            that.minute -= 1
                        } else if (that.minute === 0 && that.second === 0) {
                            that.hour -= 1;
                            that.minute = 59;
                            that.second = 59
                        } else {
                            that.second -= 1
                        }
                    }
                }, 1000)
            },
            formatNum (num) {
                return num < 10 ? '0' + num : '' + num
            }
        },
        computed: {
            // 单选题颜色样式
            singleColor(){
                return function (index) {
                    if(this.clickColor==index){
                        return 'card-num-click'
                    }if (this.choose[index]==null){
                        return 'card-num-default'
                    }if(this.choose[index]!=null){
                        return 'card-num-done'
                    }
                }
            },
            // 多选题颜色样式
            multipleColor(){
                return function (index) {
                    if(this.clickColor==index+this.SingleChoice.length){
                        return 'card-num-click'
                    }if (this.checkList[index].length==0){
                        return 'card-num-default'
                    }if(this.checkList[index].length!=0){
                        return 'card-num-done'
                    }
                }
            },
            judgmentColor(){
                return function (index) {
                    if(this.clickColor==index+this.SingleChoice.length+this.multipleChoice.length){
                        return 'card-num-click'
                    }if (this.judgmentList[index].length==0){
                        return 'card-num-default'
                    }if(this.judgmentList[index].length!=0){
                        return 'card-num-done'
                    }
                }
            },
            hourString () {
                return this.formatNum(this.hour)
            },
            minuteString () {
                return this.formatNum(this.minute)
            },
            secondString () {
                return this.formatNum(this.second)
            }
        }
    }
</script>
<style scoped>
    .card-title {
        background: #eee;
        line-height: 35px;
        text-align: center;
        font-size: 14px;

    }
    .card-tip-incomplete{
        margin:10px;
        padding: 6px;
        background: #eee;
        text-align: center;
        font-size: 3px;
        width: 40px;
        float: left;

    }
    .card-num-default{
        width: 10px;
        height: 15px;
        text-align: center;
        display: inline-block;
        background-color: #eee;
        border-color: #fff1cc;
        color: #ffba00;
        padding: 5px 10px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        white-space: nowrap;
        margin: 5px;
        float: left;
    }
    .card-num-click{
        width: 10px;
        height: 15px;
        text-align: center;
        display: inline-block;
        background-color: #fff8e6;
        border-color: #fff1cc;
        color: #ffba00;
        padding: 5px 10px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        white-space: nowrap;
        margin: 5px;
        float: left;
    }
    .card-num-done{
        width: 10px;
        height: 15px;
        text-align: center;
        display: inline-block;
        background-color: #42b983;
        border-color: #fff1cc;
        color: #ffba00;
        padding: 5px 10px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        white-space: nowrap;
        margin: 5px;
        float: left;
    }
    .sideBar{
        width:20%;
        margin: 1.2%;
        min-height:300px;
        text-align: left;
        float: left;
    }
    .main{
        float: left;
        min-height: 350px;
        width: calc(100% - 27%);
        margin:1.2%;
        padding: 6px;
    }
    .options{
        word-wrap:break-word;
        text-align: left;
        padding:5px;
        max-width: 100%;
        line-height:40px;
        min-height: 50px;
        margin: 15px;
        float: left;
        min-width: 60%;









    }
</style>
<!--                <div style="text-align: left;" v-if="i<SingleChoice.length?true:false">{{SingleChoice[i].questionTitle}}</div><br>-->
<!--                <div style="text-align: left;" v-if="i<SingleChoice.length?true:false">{{SingleChoice[i].questionContent}}</div><br>-->
<!--                <div >-->
<!--                    <el-radio class="options" v-if="SingleChoice[i].questionSelect[0]!= null?true:false" style="margin:15px" v-model="choose[i]" label="0" border>{{'A: '+SingleChoice[i].questionSelect[0].selectContent}}</el-radio>-->
<!--                    <el-radio class="options" v-if="SingleChoice[i].questionSelect[1]!= null?true:false" style="margin:15px" v-model="choose[i]" label="1" border>{{'B: '+SingleChoice[i].questionSelect[1].selectContent}}</el-radio>-->
<!--                    <el-radio class="options" v-if="SingleChoice[i].questionSelect[2]!= null?true:false" style="margin:15px" v-model="choose[i]" label="2" border>{{'C: '+SingleChoice[i].questionSelect[2].selectContent}}</el-radio>-->
<!--                    <el-radio class="options" v-if="SingleChoice[i].questionSelect[3]!= null?true:false" style="margin:15px" v-model="choose[i]" label="3" border>{{'D: '+SingleChoice[i].questionSelect[3].selectContent}}</el-radio>-->
<!--                </div>-->

<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[1] != null?true:false" class="options" style="margin:15px" border label="1">{{multipleChoice[i-SingleChoice.length].questionSelect[1].selectContent}}</el-checkbox>-->
<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[2] != null?true:false" class="options" style="margin:15px" border label="2">{{multipleChoice[i-SingleChoice.length].questionSelect[2].selectContent}}</el-checkbox>-->
<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[3] != null?true:false" class="options" style="margin:15px" border label="3">{{multipleChoice[i-SingleChoice.length].questionSelect[3].selectContent}}</el-checkbox>-->
<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[4] != null?true:false" class="options" style="margin:15px" border label="4">{{multipleChoice[i-SingleChoice.length].questionSelect[4].selectContent}}</el-checkbox>-->
<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[5] != null?true:false" class="options" style="margin:15px" border label="5">{{multipleChoice[i-SingleChoice.length].questionSelect[5].selectContent}}</el-checkbox>-->
<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[6] != null?true:false" class="options" style="margin:15px" border label="6">{{multipleChoice[i-SingleChoice.length].questionSelect[6].selectContent}}</el-checkbox>-->
<!--                        <el-checkbox v-if="multipleChoice[i-SingleChoice.length].questionSelect[7] != null?true:false" class="options" style="margin:15px" border label="7">{{multipleChoice[i-SingleChoice.length].questionSelect[7].selectContent}}</el-checkbox>-->